<!-- 设置中心 -->
<template>
	<view class="install">
		<u-navbar title="ID:6549114" titleStyle="font-weight: bold;font-size: 30rpx;" :fixed="true" :autoBack="true"></u-navbar>
		<u-gap height="20rpx" bgColor="#f2f2f2"></u-gap>
		<u-cell-group :border="false">
			<u-cell size="large" title="个人设置" :isLink="true" arrow-direction="arrow-right" url="/pages/client/userInfo"></u-cell>
			<u-cell size="large" title="账号设置" :isLink="true" arrow-direction="arrow-right" url="/pages/client/account"></u-cell>
			<u-cell size="large" title="推送设置" :isLink="true" arrow-direction="arrow-right" :border="false" url="/pages/client/push"></u-cell>
		</u-cell-group>
		<u-gap height="20rpx" bgColor="#f2f2f2"></u-gap>
		<u-cell-group :border="false">
			<u-cell size="large" title="我的勋章" :isLink="true" arrow-direction="arrow-right"></u-cell>
			<u-cell size="large" title="达人申请" :isLink="true" arrow-direction="arrow-right" url="/pages/client/intelligent"></u-cell>
			<u-cell size="large" title="意见反馈" :isLink="true" arrow-direction="arrow-right" :border="false" url="/pages/client/feedback"></u-cell>
		</u-cell-group>
		<u-gap height="20rpx" bgColor="#f2f2f2"></u-gap>
		<u-cell-group :border="false">
			<u-cell size="large" title="关于我们" :isLink="true" arrow-direction="arrow-right" url="/pages/client/notice"></u-cell>
			<u-cell size="large" title="给我们打分" :isLink="true" arrow-direction="arrow-right"></u-cell>
			<u-cell size="large" title="把烘焙帮分享给朋友" :isLink="true" arrow-direction="arrow-right" :border="false" @click="show = true"></u-cell>
		</u-cell-group>
		<u-gap height="20rpx" bgColor="#f2f2f2"></u-gap>
		<u-cell-group :border="false">
			<u-cell size="large" title="服务条款" :isLink="true" arrow-direction="arrow-right"></u-cell>
			<u-cell size="large" title="隐私条款" :isLink="true" arrow-direction="arrow-right"></u-cell>
			<u-cell size="large" title="隐私设置" :isLink="true" arrow-direction="arrow-right" :border="false" url="/pages/client/privacy"></u-cell>
		</u-cell-group>
		<view class="box">
			<u-button size="large" type="error" text="退出登录"></u-button>
			<view class="versions">版本v5.10.0.</view>
		</view>

		<!-- 分享 -->
		<u-popup :show="show" @close="close" @open="open">
			<view class="_abbr">
				<text class="tips">把烘焙帮分享给朋友</text>
				<u-grid :border="false" col="4" @click="click">
					<u-grid-item v-for="(listItem, listIndex) in list" :key="listIndex">
						<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="22"></u-icon>
						<text class="grid-text">{{ listItem.title }}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			list: [
				{
					name: 'weixin-fill',
					title: '微信'
				},
				{
					name: 'moments',
					title: '朋友圈'
				},
				{
					name: 'qq-fill',
					title: 'QQ'
				},
				{
					name: 'weibo',
					title: '新浪微博'
				},
				{
					name: 'share-square',
					title: '复制链接'
				}
			]
		};
	},
	methods: {
		open() {
			// console.log('open');
		},
		close() {
			this.show = false;
			// console.log('close');
		},
		click(index) {
			let name = this.list[index].title;
			if(name === '复制链接'){
				this.$refs.uToast.success(`复制成功`);
			} else {
				this.$refs.uToast.success(`点击 ${name} 分享`);
			}
			this.show = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.install {
	padding-top: 88rpx;

	.box {
		padding-top: 20rpx;
		height: calc(100vh - 925rpx);
		background-color: #f2f2f2;
	}

	.versions {
		text-align: center;
		margin-top: 44rpx;
		color: #999;
	}
	._abbr {
		padding: 20rpx 40rpx;
		.tips {
			font-weight: bold;
			font-size: 36rpx;
		}
	}
}
</style>
